import type { SiteListItem } from '@/apis/model/site'
import {
  deleteApiSiteApi,
  postApiSiteBatchPurgeApi
} from '@/apis/modules/site/site'
import { Form, FormItem, Input, Button } from '@arco-design/web-vue'
import { useSiteStore } from '@/stores/site'

export default function useCommand() {
  const router = useRouter()
  const handleCommand = (
    command: string,
    ids: (string | number)[] | null,
    run: (() => void) | null,
    row?: SiteListItem
  ) => {
    const map: Record<string, () => void> = {
      delete: () => {
        const nameVerification = reactive({ name: '' })
        const disabled = computed(() => nameVerification.name !== row?.domain)
        const loading = ref(false)
        const fn = () => {
          loading.value = true
          deleteApiSiteApi({ id: row.id! || '' })
            .then(() => {
              ToastUtils.success('操作成功')
              run!()
              modalReturn.close()
            })
            .finally(() => {
              loading.value = false
            })
        }

        const modalReturn = CloudModal.error(
          {
            maskClosable: false,
            //content: text,
            okText: '确定',
            footer: () => {
              return (
                <div class="flex  justify-end">
                  {/* <Button onClick={() => modalReturn.close()} class="mr-4">
                    取消
                  </Button> */}
                  <Button
                    status="danger"
                    disabled={disabled.value}
                    class={disabled.value ? 'bg-[#FBACA3]! w-full' : 'w-full'}
                    style={disabled.value ? 'border:1px solid #FBACA3' : ''}
                    onClick={() => fn()}
                    loading={loading.value}>
                    我已知晓后果并确认删除
                  </Button>
                </div>
              )
            },
            content: () => (
              <div class="flex flex-col gap-y-6 text-1 w-full">
                <span class={`text-[#1D2129] `}>
                  删除站点 “{row?.domain}” 并清空所有数据，此操作无法撤销。
                </span>
                <div class="w-full">
                  <Form layout="vertical" model={nameVerification}>
                    <FormItem
                      asteriskPosition="end"
                      field="name"
                      validateTrigger="input"
                      hide-asterisk
                    // rules={[
                    //   {
                    //     required: true,
                    //     validator(value, cb) {
                    //       if (!value) {
                    //         return cb('请输入提示内容')
                    //       }
                    //       if (value !== row?.domain) {
                    //         return cb('请输入提示内容')
                    //       }
                    //       return cb()
                    //     }
                    //   }
                    // ]}
                    >
                      {{
                        label: () => (
                          <span class="text-4">
                            请输入「
                            <span class={'text-red-500'}>{row?.domain}</span>
                            」确认
                          </span>
                        ),
                        default: () => (
                          <Input
                            class="w-full"
                            modelValue={nameVerification.name}
                            maxLength={64}
                            onInput={(v) => {
                              nameVerification.name = v
                            }}
                            placeholder=""></Input>
                        )
                      }}
                    </FormItem>
                  </Form>
                </div>
              </div>
            )
          },
          fn
        )

        // 站点删除
        // CloudModal.error(
        //   {
        //     maskClosable: false,
        //     content: '确认删除此站点？',
        //     okText: '删除'
        //   },
        //   async () => {
        //     await deleteApiSiteApi({ id: row.id! || '' })
        //     ToastUtils.success('操作成功')
        //     run!()
        //   }
        // )
      },
      cache: () => {
        // 清除缓存
        CloudModal.error(
          {
            maskClosable: false,
            content: `将永久清除所选 ${ids?.length} 个的缓存，缓存将在数分钟后失效，确认继续？`
            //content: `将永久清除${ids?.length > 1 ? '所选 ' + ids?.length + ' 个' : '所选站点'}的缓存，缓存将在数分钟后失效，确认继续？`
          },
          async () => {
            await postApiSiteBatchPurgeApi({ ids })
            ToastUtils.success('操作成功')
            run!()
          }
        )
      },
      config: () => {
        // 站点配置
        useSiteStore().setSiteInfo(row)
        router.push({
          name: 'SiteConfig',
          params: { id: row?.id }
        })
      }
    }
    map[command]()
  }
  return { handleCommand }
}
